<template>
  <el-carousel :interval="3000" type="card">
    <el-carousel-item v-for="item in img" :key="item">
      <el-image :src="item.url"/>
    </el-carousel-item>
  </el-carousel>

  <el-card>
    <el-input v-model="myinput" style="width: 300px"></el-input><el-button type="primary" @click="fun">发送请求</el-button>
    <el-descriptions :column="3" border>
      <el-descriptions-item label-align="center" align="left" label="公司名称：">{{ data.icp }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="企业类型：">{{ data.company_type }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="备案时间：">{{ data.date }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="备案域名：">{{ data.domain }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="备案主体：">{{ data.icp }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="是否备案：">{{ data.is_icp? "是":"否" }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="完整域名：">{{ data.site_name }}</el-descriptions-item>
      <el-descriptions-item label-align="center" align="left" label="备案号：">{{ data.type }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-carousel
      height="500px"
      direction="vertical"
      type="card"
  >
    <el-carousel-item v-for="item in getPriceData" :key="item">
        <p>地区：{{ item.Region }}</p>
        <p>92号汽油：{{ item.Gasoline92 }}</p>
        <p>95号汽油：{{ item.Gasoline95 }}</p>
        <p>98号汽油：{{ item.Gasoline95 }}</p>
        <p>0号柴油：{{ item.Diesel0 }}</p>
        <p>更新时间：{{ item.UpdateTime }}</p>
    </el-carousel-item>
  </el-carousel>
  <img :src="item"  v-for="item in getIconData"/>
</template>
  
<script setup>
import {ref, onMounted} from "vue";


const myinput = ref('');
const data = ref('');
const img = ref('');
const getPriceData = ref('');
const getIconData = ref([]);

function fun(){
  const a = new XMLHttpRequest();
  a.open("GET", `https://api.oioweb.cn/api/site/icp?domain=${myinput.value}`);
  a.onload = () => {
    if (a.status >= 200 && a.status < 300){
      data.value = JSON.parse(a.response).result;
    }else{
      console.log("请求失败");
    }
  }
  a.send();
}

function getImg(){
  const a = new XMLHttpRequest();
  a.open("GET", "https://api.oioweb.cn/api/bing");
  a.onload = () => {
    if (a.status >= 200 && a.status < 300){
      img.value = JSON.parse(a.response).result;
    }else {
      console.log("请求失败");
    }
  }
  a.send();
}

//获取全国油价
function getPrice(){
  const a = new XMLHttpRequest();
  a.open("GET", "https://api.oioweb.cn/api/common/GasolinePriceQuery");
  a.onload = () => {
    if (a.status >= 200 && a.status < 300){
      getPriceData.value = JSON.parse(a.response).result;
    }else{
      console.log("请求失败");
    }
  }
  a.send();
}

function getIcon(){
  const a = new XMLHttpRequest();
  a.open("GET", "https://api.oioweb.cn/api/picture/miyoushe_avatar");
  a.onload = () => {
    if (a.status >= 200 && a.status < 300){
      for (let i = 0;i < JSON.parse(a.response).result.length;i ++){
        getIconData.value = JSON.parse(a.response).result[4].list.map(item => item.icon)
      }
      console.log(getIconData.value);
    }else{
      console.log("请求失败");
    }
  }
  a.send();
}

onMounted(() => {
  getImg();
  getPrice();
  getIcon();
})

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
